<template>
    <div class="game-container report-container">
        <div class="content">
            <TableContainer
                :columns="columns"
                v-bind="tableProps"
            />
        </div>

        <el-dialog
            title="编辑场馆白名单"
            center
            :visible.sync="visible"
            width="600"
            :before-close="handleCancel"
        >
            <div>
                <el-form
					ref="validateForm"
					:model="formData"
					:rules="rules"
					label-width="200px"
				>
                    <el-form-item
						label="白名单IP"
						prop="ips"
					>
                        <el-input
                            type="textarea"
                            :rows="6"
                            v-model="formData.ips"
                            placeholder="请输入IP，用英文逗号或回车分割；"
						></el-input>
					</el-form-item>
                    <el-form-item
						label="URL地址"
						prop="url"
					>
                        <el-input
                            v-model="formData.url"
                            type="textarea"
                            :rows="6"
                            placeholder="请输入URL地址，用英文逗号或回车分割；"
							></el-input>
					</el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">
                    {{ $t('agent.cancel') }}
                </el-button>
                <el-button type="primary" :loading="loading" @click="handleOK">
                    {{ $t('agent.submit') }}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import TableContainer, {
    manager,
    initTableProps,
    TableColumns
} from '@/components/TableContainer'

export default {
    name: routerNames.gameBetslipTable,
    components: {
		TableContainer
	},
    data() {
        return {
            tableProps: initTableProps(),
            visible: false,
            loading: false,
            formData: {
                ips: undefined,
                url: undefined
            },
            rules: {
                ips: [
                    {
                        required: true,
                        message: '请输入白名单IP',
                        trigger: 'blur'
                    }
                ],
                url: [
                    {
                        required: true,
                        message: '请输入URL地址',
                        trigger: 'blur'
                    }
                ]
            },
            columns: [
                {
                    label: '场馆ID',
                    prop: 'venueId'
                },
                {
                    label: '场馆编码',
                    prop: 'venueCode'
                },
                {
                    label: '场馆名称',
                    prop: 'venueName'
                },
                {
                    label: '场馆类型',
                    prop: 'venueType'
                },
                {
                    label: '场馆类型名称',
                    prop: 'venueTypeName'
                },
                {
                    label: '白名单IP',
                    prop: 'ips',
                    minWidth: '200px',
                    customRender: ({ row }) => {
                        if (!row.ips) {
                            return '-'
                        }
                        const arr = row.ips.split(',')
                        return (
                            <div>
                                {arr.map(str => {
                                    if (!str) return null
                                    return <p>{ str }</p>
                                })}
                            </div>
                        )
                    }
                },
                {
                    label: 'URL地址',
                    prop: 'url',
                    minWidth: '200px',
                    customRender: ({ row }) => {
                        if (!row.url) {
                            return '-'
                        }
                        const arr = row.url.split(',')
                        return (
                            <div>
                                {arr.map(str => {
                                    if (!str) return null
                                    return <p>{ str }</p>
                                })}
                            </div>
                        )
                    }
                },
                {
                    label: '创建人',
                    prop: 'updatedBy'
                },
                {
                    label: '最后操作时间',
                    prop: 'updatedAt'
                },
                TableColumns.actions({
                    fixed: 'right',
                    btns: [
                        {
                            text: '编辑',
                            onClick: ({ row }) => {
                               this.formData.ips = this.formatVal(row.ips, 1)
                               this.formData.url = this.formatVal(row.url, 1)
                               this.formData.venueId = row.venueId
                               this.visible = true
                            }
                        }
                    ]
                })
            ]
        }
    },
    created() {
        const { fetchApi } = manager({
			api: this.$api.dxgameConfigListWhitelist,
			tableProps: this.tableProps, // table props
			defaultParams: this.apiParams,
            formatRes: (res) => {
                const {data, ...otherParams } = res
                return {
                    data: {
                        record: data.gameConfigList
                    },
                    ...otherParams
                }
            }
		})
        this.fetchApi = fetchApi
    },
    methods: {
        formatVal(val, bool) {
            if (bool) return val.replace(/,/g, '\r\n')

            if (val && typeof val === 'string') {
                return val.replace(/(\r\n|\n|\n\r)/g, ',')
            }
        },
        handleCancel() {
            this.visible = false
            this.$refs['validateForm'].resetFields()
        },
        async handleOK() {
            try {
                await this.$refs['validateForm'].validate()
                const { ips, url, venueId} = this.formData
                const params = {
                    venueId,
                    ips: this.formatVal(ips),
                    url: this.formatVal(url)
                }
                this.loading = true
                const res = await this.$api.dxgameConfigListWhitelistUpdate(params)

                if (res.code === 200) {
                    this.$message({
						type: 'success',
						message: '编辑成功'
					})
                    this.fetchApi()
                    this.handleCancel()
                }
            } catch (err) {
                throw err
            } finally {
                this.loading = false
            }
        }
    }
}
</script>
